<!-- 底部导航栏设置面板 -->
<template>
    <el-tabs modelValue="widget" stretch>
        <el-tab-pane label="导航设置" name="widget">
            <el-scrollbar>
                <tabbar-list />
            </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="组件样式" name="style">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="基本设置" name="1">
                        <layout-pane label="颜色">
                            <si-color-picker
                                v-model="tabbarData.backgroundColor"
                                label="背景色"
                                show-alpha
                            />
                            <si-color-picker
                                v-model="tabbarData.borderStyle"
                                label="边框色"
                                show-alpha
                            />
                        </layout-pane>
                    </el-collapse-item>
                </el-collapse>

                <el-collapse modelValue="1">
                    <el-collapse-item title="文字设置" name="1">
                        <layout-pane label="颜色">
                            <si-color-picker
                                v-model="tabbarData.color"
                                label="初始"
                                show-alpha
                            />
                            <si-color-picker
                                v-model="tabbarData.selectedColor"
                                label="选中"
                                show-alpha
                            />
                        </layout-pane>
                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { useEditStore } from '@/store'
import LayoutPane from '@/components/setting-pane/layout-pane'
import TabbarList from './components/tabbar-list'
import { SiColorPicker } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'TabbarSetting',
    components: {
        LayoutPane,
        TabbarList,
        SiColorPicker
    },
    setup() {
        const editStore = useEditStore()

        const tabbarData = computed(() => editStore.tabbarData)

        return {
            tabbarData
        }
    }
})
</script>